<!-- 页面 -->
<template>
	<s-layout navbar="custom">
		<view class="goodsinfo">
			<view class="title">{{state.goodsinfo.title}}</view>
			<view class="youxiaoqi ss-m-t-40">
				<uni-icons custom-prefix="iconfont" type="icon-shijian" size="14" style="color:#e1e1e1;"></uni-icons>
				<span>更新中 | 课程有效期至 {{sheep.$helper.timeFormat(state.goodsinfo.deadline_time, 'yyyy-mm-dd')}}</span>
			</view>
		</view>
		<view class="card-header ss-flex ss-col-center ss-m-t-40 ss-row-between">
			<view class="ss-flex ss-col-center">
				<view class="line"></view>
				<view class="title ss-m-l-20 ss-m-r-10">全部课程</view>
				<!--        <view class="des">({{ state.total }})</view>-->
			</view>
		</view>
		<view class="content-box ss-p-y-30">
			<uni-collapse accordion v-model="state.accordionVal">
				<uni-collapse-item class="skuItem" v-for="(item, index) in state.goodsskus" :key="index" :title="''">
					<template #title> <!-- 假设支持具名插槽 -->
						<view class="title-slot">
							<view class="courstitle">
								<view>{{ item.title }}</view>
								<view class="teacher">
									<su-image class="content-img" isPreview :src="sheep.$url.cdn(item.teacher.avatar)"
										:height="30" :width="30" :radius="50" mode="scaleToFill"></su-image>
									<view style="margin-left:5px;color:#666666;">{{item.teacher.nickname}}</view>
								</view>
							</view>
							<view class="coursenum">{{item.lessoncount}}节</view>

						</view>
					</template>
					<view class="content">
						<!-- 垂直线条 -->
						<view class="vertical-line"></view>
						<!-- 条目列表 -->
						<view class="item-list">
							<view v-for="(itemlesson, index) in item.all_lessons" :key="index" class="course">
								<view class="item-dot">
									<uni-icons v-if="itemlesson.lesson_type==1" custom-prefix="iconfont"
										type="icon-shipin" size="15" style="color:#f8cd88;"></uni-icons>
									<uni-icons v-else-if="itemlesson.lesson_type==4" custom-prefix="iconfont"
										type="icon-zhibo" size="15" style="color:#f8cd88;"></uni-icons>
									<uni-icons v-else-if="itemlesson.lesson_type==2" custom-prefix="iconfont"
										type="icon-wenjian" size="15" style="color:#f8cd88;"></uni-icons>
								</view>
								<view class="item-title">
									<view @tap="navigatorToVideo(item.id, itemlesson)">{{itemlesson.lesson_name}}
									</view>
									<view class="time">
										<view>
											<text
												v-if="itemlesson.content_type === 'zhibo' && itemlesson.livestart_time!=null">{{sheep.$helper.timeFormat(itemlesson.livestart_time, 'yyyy-mm-dd')}}</text>
										</view>
										<view @tap="navigatorToVideo(item.id, itemlesson)">
											<view class="rightbuttons"
												v-if="itemlesson.lesson_type==1 || itemlesson.lesson_type==4">
												<view class="item-shiting ss-reset-button"
													:class="itemlesson.learn_status_en">{{itemlesson.learn_status}}
												</view>
												<view class="learnpercent" v-if="itemlesson.learn_percent">
													已看{{itemlesson.learn_percent}}%</view>
											</view>
											<view class="rightbuttons" v-else-if="itemlesson.lesson_type==2"
												@tap="navigatorToZiliao(item.id, itemlesson)">
												<uni-icons custom-prefix="iconfont" type="icon-xiazai" size="12"
													style="color:#9fa3a2;"></uni-icons><span>查看讲义</span>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</view>
	</s-layout>
</template>


<script setup>
	import {
		computed,
		reactive
	} from 'vue';
	import {
		onLoad,
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import {
		formatOrderColor,
		formatGoodsSwiper
	} from '@/sheep/hooks/useGoods';
	import sheep from '@/sheep';
	import _ from 'lodash';
	import {
		isEmpty
	} from 'lodash';


	// 数据
	const state = reactive({
		accordionVal: [],
		goodsinfo: [],
		goodsskus: [],
		loadStatus: '',
		error: 0,
		goodsId: 0,
		avatar: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eo3xR1QVlVicDu80Rur0BLe78WI8bcsHZ0YHicA9engEDAjicrp0Oq3j776MsFUrQvBgIlDZc3LdgXkw/132"
	});

	onLoad(async (options) => {
		sheep.$api.course.getAllLessonByGoodsid({
			'orderitemid': options.id
		}).then((res) => {
			console.log(res);
			if (res.code === 1) {
				uni.setNavigationBarTitle({
					title: res.data.goodsinfo.title
				});
				state.goodsId = res.data.goodsinfo.id
				state.goodsinfo = res.data.goodsinfo
				state.goodsskus = res.data.goodsskus
			}
		})
	});

	function navigatorToVideo(courseid, lesson) {
		if (lesson.content_type == "zhibo") {
			if (lesson.lesson_type == "4") { //CC回放视频
				if (lesson.ccRoomId != "" && lesson.ccRecordId == "") {
					//是直播，还没有传回放信息
					sheep.$router.go('/pages/course/zhibo', {
						id: courseid,
						lessonId: lesson.id,
						title: lesson.lesson_name
					})
				} else if (lesson.ccRoomId != "" && lesson.ccRecordId != "") {
					//是回放视频
					console.log(2);
					sheep.$router.go('/pages/course/huifang', {
						id: courseid,
						title: lesson.lesson_name,
						recordId: lesson.id
					})
				}
			} else if (lesson.lesson_type == "2") { //资料
				console.log("xiazai");
			}
		} else if (lesson.content_type == "lubo") {
			if (lesson.lesson_type == "1") { //录播视频
				sheep.$router.go('/pages/course/lubo', {
					id: courseid,
					recordId: lesson.id,
					title: lesson.lesson_name
				})
			} else if (lesson.lesson_type == "2") { //资料
				console.log("xiazai");
			}

		}
	}

	function navigatorToZiliao(courseid, lesson) {
		sheep.$router.go('/pages/public/cospreview', {
			id: lesson.id
		});
	}

	function formattedTime(targetdata) {
		// 假设 livestart_time 是一个时间戳（毫秒数）  
		const date = new Date(targetdata);

		// 提取年月日时分秒  
		const month = date.getMonth() + 1; // 月份从0开始，需要加1  
		const day = date.getDate();
		const hours = date.getHours();
		const minutes = date.getMinutes();

		// 格式化数字，确保是两位数  
		const formattedMonth = month < 10 ? '0' + month : month;
		const formattedDay = day < 10 ? '0' + day : day;
		const formattedHours = hours < 10 ? '0' + hours : hours;
		const formattedMinutes = minutes < 10 ? '0' + minutes : minutes;

		// 拼接成所需格式  
		return `${formattedMonth}月${formattedDay}日 ${formattedHours}:${formattedMinutes}`;
	}
</script>

<style lang="scss" scoped>
	@import "@/static/iconfont/iconfont.css";


	.goodsinfo {
		width: 100%;
		height: 100px;
		padding: 20px 15px 5px 15px;
		box-sizing: border-box;
		border-radius: 0px 0px 15px 15px;
		background-color: #FFFFFF;

		.title {
			font-size: 28rpx;
			font-weight: 500;
			line-height: 50rpx;
		}

		.youxiaoqi {
			font-size: 24rpx;
			color: #666666;
		}

		.youxiaoqi span {
			margin-left: 6px;
			color: #666666;
		}

	}

	.card-header {
		margin-left: 12px;

		.line {
			width: 6rpx;
			height: 30rpx;
			background: linear-gradient(180deg, var(--ui-BG-Main) 0%, var(--ui-BG-Main-gradient) 100%);
			border-radius: 3rpx;
		}

		.title {
			font-size: 30rpx;
			font-weight: bold;
			line-height: normal;
		}

		.des {
			font-size: 24rpx;
			color: $dark-9;
		}

		.more-btn {
			font-size: 24rpx;
			color: var(--ui-BG-Main);
			line-height: normal;
		}

		.cicon-forward {
			font-size: 24rpx;
			line-height: normal;
			color: var(--ui-BG-Main);
			margin-top: 4rpx;
		}
	}

	.uni-collapse {
		background: none;
	}

	.content-box {
		padding: 12px;
		border-radius: 10px;
		box-sizing: border-box;


		.skuname {
			font-size: 0.875rem;
			font-weight: bold;
			color: #000000;
			padding-left: 5px;
		}

		.skuItem {
			background-color: #FFFFFF;
			margin-top: 10px;
			border-radius: 8px;
			padding-left: 10px;
			padding-bottom: 20px
		}

		.content {
			width: 100%;
			font-size: 26rpx;
			font-weight: 400;
			color: #333333;
			display: flex;
			align-items: flex-start;
			/* 确保线条和条目顶部对齐 */
			position: relative;

		}

		.course {
			padding: 10px 0;

			span {
				color: grey;
			}

			.item-dot {
				position: absolute;
				left: 6px;
				color: #ff6000;
				padding: 2px;
				background-color: rgb(241 236 217 / 50%);
			}

			.item-title {
				font-size: 24rpx;
				font-weight: 500;
				line-height: normal;
				padding-left: 10px;
				padding-right: 10px;
			}

			.item-title .time {
				color: #9fa3a2;
				font-size: 22rpx;
				margin-top: 12px;
				display: flex;
				justify-content: space-between;
			}

			.rightbuttons {
				width: 120rpx;
				color: #9fa3a2;
				font-size: 20rpx;
			}

			.item-shiting {
				width: 120rpx;
				height: 40rpx;
				font-weight: 500;
				font-size: 22rpx;
				border-radius: 40rpx;
				background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
				color: $white;

			}

			.learnpercent {
				text-align: center;
				color: #9fa3a2;
				font-size: 20rpx;
				margin-top: 2px;
			}

			.tag-content {
				flex: 1;
				min-width: 0;
				white-space: nowrap;
			}

			.tag-box {
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.tag {
				flex-shrink: 0;
				padding: 4rpx 10rpx;
				font-size: 24rpx;
				font-weight: 500;
				border-radius: 4rpx;
				color: var(--ui-BG-Main);
				background: var(--ui-BG-Main-tag);
			}

			.ykw {
				color: #e9b563;
				background: none;
				background-color: rgb(241 236 217 / 50%);
			}
		}

		.vertical-line {
			// width: 1px;
			width: 20px;
			//background-color: #ff6000;
			margin-right: 10px;
			//margin-left: 8px;
			/* flex-grow: 1; */
			align-self: stretch;
		}

		.item-list {
			display: flex;
			flex-direction: column;
			width: 100%;
			/* 条目垂直排列 */
		}

		.title-slot {
			padding-bottom: 15px;
			padding-top: 15px;
			display: flex;
			border-bottom: 1px dotted #e1e1e1;
		}

		.title-slot .courstitle {
			font-size: 26rpx;
			color: #333333;
			width: 90%;
		}

		.teacher {
			display: flex;
			margin-top: 18px;
		}

		.content-img {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
		}

		.title-slot .coursenum {
			width: 8%;
			font-size: 20rpx;
			color: #666666;
			display: flex;
			align-items: center;
			/* 垂直居中 */
			justify-content: end;
			/* 水平居中 */
		}
	}
</style>